<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
    <div>

   
    <img id="a1" src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg" alt="">
    <img id="a2" src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg" alt="">
    <img id="a3" src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg" alt="">
</div>
    <script>
        // 
        var imgs = document.images;
        var div = document.querySelector("div");
        for(var i = 0;i < imgs.length;i++){
            imgs[i].ondragstart = function(e){
                // console.log("开始拖拽");
                // console.log(e.target);
                // e.dataTransfer是一个对象 是拖拽事件提供的,在所有拖拽事件中公有的对象
                // setData是向dataTransfer对象添加数据
                // 参数1是属性名
                // 参数2是属性值
                e.dataTransfer.setData("ele",e.target.id); //将被拖拽的标签的id存入dataTransfer对象
                // e.dataTransfer.setData("ele",e.target.id); //将被拖拽的标签的id存入dataTransfer对象
            }
            imgs[i].ondrop = function(e){
            // 设置阻止事件的传播和默认事件 能解决图片在新窗口打开的问题
            // event.preventDefault()方法： 当前事件不执行，会向上冒泡到父级元素。
            // event.stopPropagation()方法：当前的事件执行，但是不会向上冒泡。
                e.preventDefault()
                e.stopPropagation();
                // imgs = document.images;
                console.log("结束拖拽");
                console.log(e.target); //结束时,鼠标所在的标签
                // getData() 获取dataTransfer中的数据
                // 参数是属性名 

                var ai = e.dataTransfer.getData("ele"); //获取被拖拽标签的id
                console.log(ai); //根据id获取被拖拽的标签
                var img = document.getElementById(ai);
                // 设置在div内将获取到的img插入在e.target这个子标签之前
                div.insertBefore(img,e.target)
            }
        }
    </script>
</body>
</html>